<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1,user-scalable=no, width=device-width">

    <title>Hello World</title>
    <script src="lib/vue.min.js" async></script>
    <script src="lib/vue-router.min.js" async></script>
    <script src="lib/milk-vue.min.js" async></script>
    <script src="cordova.js" async></script>
</head>
<body>
<div id="app">
    <router-view></router-view>
</div>

<script type="x-template" id="index">
    <div>
        <v-nav-bar title="Index"/>
        <router-link class="button button-assertive" to="/about"> About</router-link>
        <v-button type="primary" @click="handleClick">{{msg}}</v-button>

    </div>
</script>
<script type="x-template" id="about">
    <div>
        <v-nav-bar icon="left" title="About" @icon-click="onClickLeft( )"/>
        <div class="page-content text-center">
            <router-link class="button button-assertive" to="/"> Back</router-link>
            <a href="https://vueclub.github.io/milk-vue/#/zh-CN/component/quickstart"><h2 class="padding">API</h2></a>
        </div>
    </div>
</script>
<script>
    const Index = {
        template: '#index',
        data: function () {
            return {
                msg: 'Hello! Milk.',
                rangeValue: 22
            }
        },
        methods: {
            handleClick: function () {
                //this.Toast('Hello world!')
            }
        }
    }
    const About = {
        template: "#about",
        methods: {
            onClickLeft: function () {
                this.$router.push('/');
            }
        }
    }

    // Routes
    const routes = [
        {path: '/', component: Index},
        {path: '/about', component: About}
    ]
    document.addEventListener('deviceready', function () {
        // Start up
        new Vue({router: new VueRouter({routes: routes})}).$mount('#app')
    });
</script>

</body>
</html>
